<template>
  <div class="waiting-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
          v-model="optionsInfo['areaHeight']"
          :min="5"

          size="small"
          class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="队列数">
        <el-input-number
          v-model="optionsInfo['showRowNums']"
          :min="5"
          :max="getQueueMaxRow"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="是否切屏">
        <el-switch v-model="optionsInfo.switchScreen"></el-switch>
      </el-form-item>
      <el-form-item label="切屏时间(s)">
        <el-input-number
          :min="10"
          :step="1"
          v-model="optionsInfo.switchTime"
          :disabled="!(optionsInfo.switchScreen)"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>
    </div>
    <div class="list-item-setting queue-area">
      <div class="title-info">
        <el-divider content-position="left">队列头部设置</el-divider>
      </div>
      <el-form-item label="候诊类型设置" class="wait-patient-set">
        <el-radio-group v-model="optionsInfo.waitPatientType">
          <el-radio :label="item.value" v-for="item in waitPatientTypeOptions" :key="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="字号设置">
        <el-input-number
          v-model="optionsInfo['queueInfo']['headerFontSize']"
          :min="12"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo['queueInfo']['headerFontWeight']" placeholder="请选择">
          <el-option
            v-for="item in fontWeightOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="col-info">
        <div class="title">
          <el-divider content-position="center">队列显示列</el-divider>
        </div>
        <div class="options-info row-option">
          <el-checkbox-group v-model="optionsInfo['queueInfo']['defaultShowCol']">
            <Draggable
              class="list-group"
              @end="handleDragEnd"
              :list="optionsInfo['queueInfo']['colOptions']"
              :animation="100"
            >
              <el-checkbox
                v-for="(item,index) in (optionsInfo['queueInfo']['colOptions'])"
                :key="index"
                :label="item.value"
                :disabled="isDisabled(item.value)"
              >
                <div class="setting-info">
                  <el-input v-model="item.label" placeholder="请输入内容" size="small"/>
                  <el-input
                    type="number"
                    :min="0.1"
                    :max="7"
                    :step="0.1"
                    :precision="1"
                    @change.native.prevent="(e)=>handleChangeWidth(e)"
                    v-model="item.flex" placeholder="请输入列宽" size="small"/>
                </div>
                <i class="el-icon-thumb"></i>
              </el-checkbox>
            </Draggable>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <div class="title-info">
        <el-divider content-position="left">队列列表设置</el-divider>
      </div>
      <el-form-item label="背景颜色">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo['queueInfo']['listBackground']"/>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo['queueInfo']['listColor']"/>
      </el-form-item>
      <el-form-item label="字号设置">
        <el-input-number
          v-model="optionsInfo['queueInfo']['listFontSize']"
          :min="12"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo['queueInfo']['listFontWeight']" placeholder="请选择">
          <el-option
            v-for="item in fontWeightOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-divider content-position="left">队列滚动设置</el-divider>
      <el-form-item label="是否滚动">
        <el-switch v-model="optionsInfo['queueInfo']['scroll']" @change="handleChangeQueueScroll"/>
      </el-form-item>

      <el-form-item label="滚动速度">
        <el-input-number
          v-model="optionsInfo['queueInfo']['scrollStep']"
          :min="1"
          :max="4"
          size="small"
          class="hide-spin-button"
          :disabled="!(optionsInfo['queueInfo']['scroll'])"
        />
      </el-form-item>

      <el-form-item label="队列的长度" v-if="false">
        <el-input-number
          v-model="optionsInfo['queueInfo']['scrollSliceNumber']"
          :min="1"
          :max="99"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>

      <el-form-item label="开启滚动的长度" v-if="false">
        <el-input-number
          v-model="optionsInfo['queueInfo']['scrollNumber']"
          :min="6"
          :max="99"
          size="small"
          class="hide-spin-button"
          :disabled="!(optionsInfo['queueInfo']['scroll'])"
        />
      </el-form-item>

    </div>

    <div class="list-title-setting patient-area">
      <div class="title-info">
        <el-divider content-position="left">患者列表头部设置</el-divider>
      </div>
      <el-form-item label="背景颜色" v-if="false">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo['patientInfo']['headerBackground']"/>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo['patientInfo']['headerColor']"/>
      </el-form-item>
      <el-form-item label="字号设置">
        <el-input-number
          v-model="optionsInfo['patientInfo']['headerFontSize']"
          :min="12"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo['patientInfo']['headerFontWeight']" placeholder="请选择">
          <el-option
            v-for="item in fontWeightOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题内容">
        <el-input
          type="textarea"
          v-model="optionsInfo['patientInfo']['header']"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>
      <div class="title-info">
        <el-divider content-position="left">患者列表设置</el-divider>
      </div>
      <el-form-item label="背景颜色" v-if="false">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo['patientInfo']['listBackground']"/>
      </el-form-item>
      <el-form-item label="字体颜色" v-if="false">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo['patientInfo']['listColor']"/>
      </el-form-item>
      <el-form-item label="字号设置">
        <el-input-number
          v-model="optionsInfo['patientInfo']['listFontSize']"
          :min="12"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo['patientInfo']['listFontWeight']" placeholder="请选择">
          <el-option
            v-for="item in fontWeightOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="患者行" class="tooltip-area" v-if="false">
        <div class="left">
          <el-input-number
            v-model="optionsInfo['patientInfo']['showRowNums']"
            :min="5"
            :max="6"
            size="small"
            class="hide-spin-button"
          />
        </div>
        <div class="right" v-if="false">
          <el-tooltip class="item" effect="dark" content="当候诊患者数小于等于15条的时候该属性将会失效"
                      placement="bottom">
            <el-button>
              <i class="el-icon-question"></i>
            </el-button>
          </el-tooltip>
        </div>
      </el-form-item>
      <el-form-item label="患者列" class="tooltip-area" v-if="false">
        <div class="left">
          <el-input-number
            v-model="optionsInfo['patientInfo']['showColNums']"
            :min="3"
            :max="4"
            size="small"
            class="hide-spin-button"
          />
        </div>
        <div class="right" v-if="false">
          <el-tooltip class="item" effect="dark" content="当候诊患者数小于等于15条的时候该属性将会失效"
                      placement="bottom">
            <el-button>
              <i class="el-icon-question"></i>
            </el-button>
          </el-tooltip>
        </div>
      </el-form-item>

      <el-divider content-position="left">中药候诊患者滚动设置</el-divider>
      <el-form-item label="是否滚动">
        <el-switch v-model="optionsInfo['patientInfo']['eastScroll']"/>
      </el-form-item>
      <el-form-item label="滚动速度">
        <el-input-number
          v-model="optionsInfo['patientInfo']['eastScrollStep']"
          :min="1"
          :max="4"
          size="small"
          class="hide-spin-button"
          :disabled="!(optionsInfo['patientInfo']['eastScroll'])"
        />
      </el-form-item>

      <el-divider content-position="left">西药候诊患者滚动设置</el-divider>
      <el-form-item label="是否滚动">
        <el-switch v-model="optionsInfo['patientInfo']['westScroll']"/>
      </el-form-item>

      <el-form-item label="滚动速度">
        <el-input-number
          v-model="optionsInfo['patientInfo']['westScrollStep']"
          :min="1"
          :max="4"
          size="small"
          class="hide-spin-button"
          :disabled="!(optionsInfo['patientInfo']['westScroll'])"
        />
      </el-form-item>

    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable"
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "waitDrugstoreConfig2-editor",

  componentName: "waitDrugstoreConfig2-editor",

  components: {
    Draggable,
  },

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      optionsInfo: Object(),
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
      waitPatientTypeOptions:types['waitPatientTypeOptions'],
    }
  },

  computed: {
    // 判断字段是否存在
    fieldHas() {
      return function (field) {
        return Reflect.has(this.optionsInfo, field)
      }
    },

    // 获取队列的最大值
    getQueueMaxRow() {
      let {queueInfo} = this.optionsInfo;
      if (queueInfo.scroll) {
        return 6
      } else {
        return 6
      }
    },


    isDisabled() {
      return function (val) {
        let arr = [];
        return arr.includes(val);
      }
    },

    registerObjNameOptions() {
      return this.$store.getters['templateDetails/getRegisterObjNameOptions']
    }
  },

  methods: {
    // 拖动
    handleDragEnd() {
    },

    // 总量
    handleTotal(val) {
      let {multiple} = (this.optionsInfo)
      this.optionModel.rowNumber = multiple * val;
    },

    handleChangeWidth(event, key) {
      console.log(event)
      console.log(key)
    },

    handleChangeQueueScroll(val) {
      if (!val) {
        let {multiple} = (this.optionsInfo)
        Reflect.set((this.optionsInfo), 'showRowNums', 5)
        Reflect.set((this.optionsInfo), 'rowNumber', 5 * multiple)
      }
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = (val[val.config]);
      },
      deep: true,
      immediate: true
    }
  }

}
</script>

<style lang="scss" scoped>
.col-info {
  :deep(.el-form-item__content) {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-checkbox__label {
      width: auto;
    }

    .el-icon-thumb {
      position: relative;
      top: 8px;
      padding-left: 10px;
      font-size: 18px;
      text-align: center;
    }

    .el-checkbox {
      width: calc(100%);
      box-sizing: border-box;

      .el-checkbox__label {
        width: calc(100% - 14px);
      }
    }
  }
}

.row-option {
  :deep(.el-checkbox) {
    display: flex;
    flex-direction: row;

    .el-checkbox__input {
      display: flex;
      align-self: flex-start;
      align-items: flex-start;
    }

    .el-checkbox__label {
      display: flex;
      flex-direction: row;
    }

    .setting-info {
      display: flex;
      flex-direction: column;
      width: 100%;

      .el-input {
        width: 100%;
        margin-bottom: 20px;

        input[type="number"] {
          line-height: 1px !important;
        }
      }

      .el-input-number {
        width: 100%;
      }

      .el-input__inner {
        padding-right: 0 !important;
      }
    }
  }
}

.tooltip-area {
  :deep(.el-form-item__content) {
    display: flex;

    .right {
      .el-button {
        padding: 9px 8px;
        border: none;
        font-size: 18px;
        color: #E6A23C;

        &:hover {
          background: transparent !important;
        }
      }
    }
  ;
  }
}

.wait-patient-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;;

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 10px 0;
      }
    }
  }

}
</style>
